<div class="panel" *ngIf="panelData.mode != 'info'">
  <nz-carousel [nzEffect]="'scrollx'" style="height: 150px" [nzDotRender]="dotTemplate" *ngIf="panelData.mode != 'irrInfo'">
    <ng-template #dotTemplate>
      <div class="dot"></div>
    </ng-template>
    <div nz-carousel-content *ngFor="let list of selectedList">
      <ul nz-row class="selected-list">
        <li nz-col nzSpan="12" *ngFor="let node of list">
          <img [src]="'./assets/images/mapicon/' + node.icon + '.png'" (click)="onClickIcon(node)" alt="">
          <span>{{ node.title }}</span>
          <span>{{ node.total }}</span>
          <!-- <div class="switch" [class.off]="node.labelOff" *ngIf="panelData.mode == 'major'" (click)="onSwitch(node)"></div> -->
        </li>
      </ul>
    </div>
  </nz-carousel>

  <div class="panel-title" *ngIf="panelData.mode == 'irrInfo'">
    <div [class.active]="tabActive == 0" (click)="tabActive = 0">
      <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
      <span>种植结构</span>
    </div>
    <div [class.active]="tabActive == 1" (click)="tabActive = 1">
      <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
      <span>列表</span>
    </div>
  </div>
  <ng-container *ngIf="panelData.mode == 'irrInfo'">
    <div class="drainage-chn" [hidden]="tabActive != 0">
      <div class="title">宁西公司种植结构</div>
      <app-irr-info-panel [type]="1"></app-irr-info-panel>
    </div>

    <div class="drainage-chn" [hidden]="tabActive != 1">
      <div class="title">宁西公司灌溉进度</div>
      <app-irr-info-panel [type]="2"></app-irr-info-panel>
    </div>
  </ng-container>

  <div class="panel-title" *ngIf="panelData.mode == 'base'">
    <div [class.active]="tabActive == 0" (click)="tabActive = 0">
      <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
      <span>统计</span>
    </div>
    <div [class.active]="tabActive == 1" (click)="tabActive = 1">
      <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
      <span>列表</span>
    </div>
  </div>
  <ng-container *ngIf="panelData.mode == 'base'">
    <div class="drainage-chn" [hidden]="tabActive != 0">
      <app-statistics [statOpt]="statOpt"></app-statistics>
    </div>

    <div class="drainage-chn" [hidden]="tabActive != 1">
      <div class="title">{{panelData.title || '管理处'}}</div>
      <nz-table #buildingTable nzBordered [nzData]="panelList" [nzFrontPagination]="false" [nzTotal]="total"
        [nzPageSize]="pageSize" [(nzPageIndex)]="pageNum" (nzPageIndexChange)="getPanalList()">
        <ng-container *ngIf="statType == 'shanhonggou'">
          <thead>
            <tr>
              <th>名称</th>
              <th>穿（入）渠形式</th>
              <th>流域面积(km²)</th>
              <th>最大洪峰流量(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.floodName }}</td>
              <td>{{ item.crossArea }}</td>
              <td>{{ item.floodArea }}</td>
              <td>{{ item.maxFlow }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'zhihongqu'">
          <thead>
            <tr>
              <th>名称</th>
              <!-- <th>设计库容(万m³)</th> -->
              <th>实际库容(万m³)</th>
              <th>实际泄洪能力(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.detentionName }}</td>
              <!-- <td>{{ item.designStorage }}</td> -->
              <td>{{ item.actualStorage }}</td>
              <td>{{ item.actualDischarge }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'irrArea'">
          <thead>
            <tr>
              <th>名称</th>
              <th>管理单位</th>
              <th>灌区<br>类型</th>
              <th>灌区面积<br>(万亩)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.name }}</td>
              <td>{{ item.upperManageUnit }}</td>
              <td>{{ irrAreaType[item.type] }}</td>
              <td>{{ item.irrigatedArea }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'office' || statType == 'station'">
          <thead>
            <tr>
              <th>名称</th>
              <th>
                灌溉面积(万亩)
                <!-- <span class="detail-button" (click)="modalShow = true">
                  <i nz-icon nzType="more" nzTheme="outline"></i>
                </span> -->
              </th>
              <th *ngIf="statType == 'office'">年平均引水能力(亿m³)</th>
              <th *ngIf="statType == 'station'">管理渠道长度(km)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.manageName }}</td>
              <td>{{ item.irrigatedArea }}</td>
              <td *ngIf="statType == 'office'">
                {{ item.annulWaterDiversionCapacity }}
              </td>
              <td *ngIf="statType == 'station'">{{ item.canalLength }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'ganqu'">
          <thead>
            <tr>
              <th>名称</th>
              <th>长度(km)</th>
              <th>灌溉面积(万亩)</th>
              <th>引水水源</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.canalName }}</td>
              <td>{{ item.length }}</td>
              <td>{{ item.irrigatedArea }}</td>
              <td>{{ item.irrSource }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'section'">
          <thead>
            <tr>
              <th>名称</th>
              <th>测流形式</th>
              <th>断面水深(m)</th>
              <th>实际流量(m³/s)</th>
              <th>控制灌溉面积(万亩)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.sectionName }}</td>
              <td>{{ item.flmlType }}</td>
              <td>{{ item.sectionDepth }}</td>
              <td>{{ item.sectionActualFlow }}</td>
              <td>{{ item.controllingIrrigatedArea }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'paishuigou'">
          <thead>
            <tr>
              <th>名称</th>
              <th>穿越形式</th>
              <th>长度(km)</th>
              <th>实际排水能力(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.drainageName }}</td>
              <td>{{ item.crossType }}</td>
              <td>{{ item.length }}</td>
              <td>{{ item.actualDrainageCapacity }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="
                statType == 'jinshuizha' ||
                statType == 'jiezhizha' ||
                statType == 'tuishuizha' ||
                statType == 'zhikaikou'
              ">
          <thead>
            <tr>
              <th>名称</th>
              <th *ngIf="statType != 'zhikaikou'">闸门类型</th>
              <th *ngIf="statType == 'zhikaikou'">结构形式</th>
              <th *ngIf="statType == 'jinshuizha' || statType == 'zhikaikou'">
                控制灌溉面积(亩)
              </th>
              <th *ngIf="statType != 'zhikaikou'">实际过水能力（m³/s）</th>
              <!-- <th *ngIf="statType == 'zhikaikou'">设计流量（m³/s）</th> -->
              <th *ngIf="statType == 'jiezhizha' || statType == 'tuishuizha'">
                启闭形式
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.watergateCode }}</td>
              <td *ngIf="statType != 'zhikaikou'">{{ item.type }}</td>
              <td *ngIf="statType == 'zhikaikou'">{{ item.structureType }}</td>
              <td *ngIf="statType == 'jinshuizha' || statType == 'zhikaikou'">
                {{ item.controllingIrrigatedArea }}
              </td>
              <td *ngIf="statType != 'zhikaikou'">{{ item.actualCapacity }}</td>
              <!-- <td *ngIf="statType == 'zhikaikou'">{{ item.designMostFlux }}</td> -->
              <td *ngIf="statType == 'jiezhizha' || statType == 'tuishuizha'">
                {{ item.powerType }}
              </td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'ducao' || statType == 'handong'">
          <thead>
            <tr>
              <th>名称</th>
              <th>结构形式</th>
              <th>实际过水能力(m³/s)</th>
              <th>长度(m)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.flumeName || item.culvertName }}</td>
              <td>{{ item.structure }}</td>
              <td>{{ item.actualCapacity }}</td>
              <td>{{ item.length }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'bengzhan'">
          <thead>
            <tr>
              <th>名称</th>
              <th>控制灌溉面积(万亩)</th>
              <th>设计流量(m³/s)</th>
              <th>装机容量(kw)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.pumpName }}</td>
              <td>{{ item.controllingIrrigatedArea }}</td>
              <td>{{ item.designMostFlux }}</td>
              <td>{{ item.capacity }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'qiaoliang'">
          <thead>
            <tr>
              <th>名称</th>
              <th>结构形式</th>
              <th>长</th>
              <th>宽</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.bridgeName }}</td>
              <td>{{ item.type }}</td>
              <td>{{ item.length }}</td>
              <td>{{ item.width }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'dieshui'">
          <thead>
            <tr>
              <th>名称</th>
              <th>实际过水能力(m³/s)</th>
              <th>跌差(m)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.dropName }}</td>
              <td>{{ item.actualCapacity }}</td>
              <td>{{ item.dropDiffer }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'yiliuyan'">
          <thead>
            <tr>
              <th>名称</th>
              <th>左右堤</th>
              <th>设计溢流能力(m³/s)</th>
              <th>实际溢流能力(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.name }}</td>
              <td>{{ item.leftRightBank }}</td>
              <td>{{ item.designedCapacity }}</td>
              <td>{{ item.actualCapacity }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'gyysdw'">
          <thead>
            <tr>
              <th>名称</th>
              <th>水源类型</th>
              <th>取水许可证批准年取水量</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.name }}</td>
              <td>{{ item.sourceType }}</td>
              <td>{{ item.applyAmout }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="qskArr.indexOf(statType) > -1">
          <thead>
            <tr>
              <th>测站名称</th>
              <th>测站类别</th>
              <th>运行状况</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.wiustNm }}</td>
              <td>{{ item.wiustTp }}</td>
              <td>{{ item.runCond }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="qskArr1.indexOf(statType) > -1">
          <thead>
            <tr>
              <th>名称</th>
              <th>取水用途</th>
              <th>最大取水流量(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.mc }}</td>
              <td>{{ item.qsyt }}</td>
              <td>{{ item.zdqsll }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="dmArr.indexOf(statType) > -1">
          <thead>
            <tr>
              <th>测站名称</th>
              <th *ngIf="statType != 'yz'">河流名称</th>
              <th *ngIf="statType == 'yz'">管理处名称</th>
              <th>水系名称</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of buildingTable.data" (click)="onSelectBuilding(item)">
              <td>{{ item.stadiaName }}</td>
              <td *ngIf="statType != 'yz'">{{ item.rvnm }}</td>
              <td *ngIf="statType == 'yz'">{{ item.canalName }}</td>
              <td>{{ item.hnnm }}</td>
            </tr>
          </tbody>
        </ng-container>
        <!-- <ng-container *ngIf="statType == 'ylz'">
          <thead>
            <tr>
              <th>测站名称</th>
              <th>所属市县</th>
              <th>实测值</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.stadiaName }}</td>
              <td>{{ item.stlc }}</td>
              <td>{{ weatherMap[item.wth] }}</td>
            </tr>
          </tbody>
        </ng-container> -->
      </nz-table>
    </div>
  </ng-container>

  <ng-container *ngIf="panelData.mode != 'base' && panelData.mode != 'irrInfo'">
    <div class="drainage-chn">
      <div class="title">{{panelData.title || '管理处'}}</div>
      <nz-table #monitorList nzBordered [nzData]="panelList" [nzFrontPagination]="false" [nzTotal]="total"
        [nzPageSize]="pageSize" [(nzPageIndex)]="pageNum" (nzPageIndexChange)="getMonitorList()">
        <ng-container *ngIf="dmArr1.indexOf(statType) > -1">
          <thead>
            <tr>
              <th>名称</th>
              <th>水位(m)</th>
              <th>流量(m³/s)</th>
              <th *ngIf="statType == 'hh'">蓄水量(亿m³)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.stadiaName || item.pumpName }}</td>
              <td><span [class.active]="item.change">{{ item.waterHeight || item.rz || item.heightInside || '-' }}</span></td>
              <td><span [class.active]="item.change">{{ item.flux || item.fluxOut || item.instanFlow }}</span></td>
              <td *ngIf="statType == 'hh'">{{ item.storage ? item.storage/100 : '' }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'ylz' || statType == 'cyylz'">
          <thead>
            <tr>
              <th>名称</th>
              <th>日降水量(mm)</th>
              <th>天气状况</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.stadiaName }}</td>
              <td>{{ item.dyp }}</td>
              <td>{{ weatherMap[item.wth] }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'sqz'">
          <thead>
            <tr>
              <th>名称</th>
              <th>10cm深度含水率</th>
              <th>40cm深度含水率</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.stadiaName }}</td>
              <td>{{ item.slm10 || '-' }}%</td>
              <td>{{ item.slm40 || '-' }}%</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="qskArr.indexOf(statType) > -1">
          <thead>
            <tr>
              <th>名称</th>
              <th>日取水量(m³)</th>
              <th>流量(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.wiustNm || item.wiuNm }}</td>
              <td>{{ item.dayW }}</td>
              <td>{{ item.mpQ }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="
              statType == 'jinshuizha' ||
              statType == 'jiezhizha' ||
              statType == 'tuishuizha'
            ">
          <thead>
            <tr>
              <th>名称</th>
              <th>闸前水位(m)</th>
              <th>闸后水位(m)</th>
              <th>开度(mm)</th>
              <th>流量(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.watergateCode }}</td>
              <td>{{ item.heightUp }}</td>
              <td>{{ item.heightDown }}</td>
              <td>{{ item.degree }}</td>
              <td>{{ item.flux }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'zhikaikou'">
          <thead>
            <tr>
              <th>名称</th>
              <th>闸前水位(m)</th>
              <th>开度(mm)</th>
              <th>流量(m³/s)</th>
              <th>累计流量(m³)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.watergateCode }}</td>
              <td>{{ item.heightUp }}</td>
              <td>{{ item.degree }}</td>
              <td>{{ item.flux }}</td>
              <td>{{ item.totalFlux }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'bengzhan'">
          <thead>
            <tr>
              <th>名称</th>
              <th>前池水位(m)</th>
              <th>后池水位(m)</th>
              <th>流量(m³/s)</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.pumpName }}</td>
              <td>{{ item.waterLevel }}</td>
              <td>{{ item.waterLevel }}</td>
              <td>{{ item.flux }}</td>
            </tr>
          </tbody>
        </ng-container>
        <ng-container *ngIf="statType == 'zyzm'">
          <thead>
            <tr>
              <th>名称</th>
              <th>闸前水位(m)</th>
              <th>闸后水位(m)</th>
              <th>闸门开度(m)</th>
              <th>孔数</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of monitorList.data" (click)="onSelectBuilding(item)">
              <td>{{ item.watergateCode }}</td>
              <td>{{ item.heightUp }}</td>
              <td>{{ item.heightDown }}</td>
              <td>{{ item.degreeMax }}</td>
              <td>{{ item.validStrobe }}</td>
            </tr>
          </tbody>
        </ng-container>
      </nz-table>
    </div>
  </ng-container>
</div>

<div class="panel" *ngIf="panelData.mode == 'info'">
  <app-panel-info [data]="panelData.infoData"></app-panel-info>
</div>

<!-- <div class="panel panel-monitor" *ngIf="panelData.mode == 'monitor'">
  <div class="panel-title">
    <div [class.active]="tabActive == 0" (click)="tabActive = 0">
      <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
      <span>实时监测信息</span>
    </div>
    <div [class.active]="tabActive == 1" (click)="tabActive = 1">
      <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
      <span>列表</span>
    </div>
  </div>

  <div class="drainage-chn" [hidden]="true">
    <ul class="chn-info">
      <li *ngFor="let item of flowList">
        <img [src]="'./assets/images/map/monitor/' + item.icon + '.png'" alt="" />
        <div>
          <div class="info-text">{{ item.text }}({{ item.unit }})</div>
          <div class="info-value">{{ item.value | number: "0.0-2" }}</div>
        </div>
      </li>
    </ul>

    <div class="sub-title">今日总量</div>
    <ul class="total">
      <li *ngFor="let item of totalList">
        <div class="info-text">{{ item.text }}({{ item.unit }})</div>
        <div class="info-value">{{ item.value | number: "0.0-2" }}</div>
      </li>
    </ul>

    <div class="sub-title">超标监测点</div>
    <nz-table #alertTable nzBordered [nzData]="alertList" [nzShowPagination]="false" class="alert-table">
      <thead>
        <tr>
          <th>测点</th>
          <th>计划引水量<br />(亿m³)</th>
          <th>实际引水量<br />(亿m³)</th>
          <th>百分比</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of alertTable.data">
          <td>{{ item.name }}</td>
          <td>{{ item.planUseTotal }}</td>
          <td>{{ item.totalUse }}</td>
          <td>{{ item.totalUse / item.planUseTotal | percent }}</td>
        </tr>
      </tbody>
    </nz-table>

    <div class="sub-title">警情</div>
    <div class="content">
      <p *ngFor="let item of warningList">[{{ item.title }}] {{ item.info }}</p>
    </div>

    <div class="sub-title">测点列表</div>
    <nz-table #monitorTable nzBordered [nzShowPagination]="false" [nzData]="monitorList">
      <thead>
        <tr>
          <th>测点</th>
          <th>水位(m)</th>
          <th>流量(m³/s)</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of monitorTable.data">
          <td>{{ item.name }}</td>
          <td>{{ item.waterLevel }}</td>
          <td>{{ item.flow }}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>

  <div class="drainage-chn" [hidden]="tabActive != 1">
  </div>
</div> -->
